import React from "react";
import type { FormProps } from "antd";
import { Button, Form, Input, Card, Select, message } from "antd";
import { useNavigate } from "react-router-dom";

const { Option } = Select;

type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
};

const Login: React.FC = () => {
    const [messageApi, contextHolder] = message.useMessage();

    const navigate = useNavigate();
    const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
        if (values?.password === "t123456" && values.username === "admin") {
            navigate("/system/user");
        } else {
            messageApi.open({
                type: "error",
                content: "用户名或者密码不正确",
            });
        }
    };

    const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
        console.log("Failed:", errorInfo);
    };

    return (
        <>
            {contextHolder}
            <section className="mr-6 grow flex justify-evenly items-center h-screen" style={{ background: "rgb(246 246 246)" }}>
                <Card className="w-80">
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <h2 style={{ margin: "0 0 20px 0" }}>无人化自动装车系统软件</h2>
                        <Form.Item<FieldType> name="username" rules={[{ required: true, message: "请输入用户名" }]} wrapperCol={{}}>
                            <Input placeholder="用户名" />
                        </Form.Item>

                        <Form.Item<FieldType> name="password" rules={[{ required: true, message: "请输入密码" }]} wrapperCol={{}}>
                            <Input.Password placeholder="密码" />
                        </Form.Item>

                        <Form.Item<FieldType> name="remember" valuePropName="checked" wrapperCol={{}}>
                            <Select placeholder="班次" allowClear>
                                <Option value="1">一班白班</Option>
                            </Select>
                        </Form.Item>

                        <Form.Item wrapperCol={{}} className="mb-3">
                            <Button type="primary" htmlType="submit" className="w-full">
                                登录
                            </Button>
                        </Form.Item>
                        <p style={{ fontSize: 12, color: "#999" }}>
                            技术支持：盛世沛金科技（江苏）有限公司<sup>TM</sup>
                        </p>
                    </Form>
                </Card>
            </section>
        </>
    );
};

export default Login;
